<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-30 16:27:44
 * @FilePath: \ft-apply-admin-apply-pro\src\views\TrainDetails\trainDetails.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="train-details">
    <span class="flex mb-16px ">
      <div class="block-div h-156px w-30% mr-20px flex items-center">
        <div class="flex justify-between w-100%">
          <div>
            <span class="font-size-20px mr-6px ">{{ data.trainingNumberName }}</span>
            <a-tag :color="statusObj.status" class="align-text-bottom">{{ statusObj.name }}</a-tag>
            <edit-outlined v-auth="'editTrainingDetail'" class="ml-10px color-#209EE4 cursor-pointer font-size-18px"
            @click="handleOpenModal" />
            <div class="mt-20px flex flex-col">
              <span class="flex"  style="white-space:nowrap">
                <span>培训时间：{{ data.trainingTime }}</span>
              </span>
              <span class="mt-5px " style="white-space:nowrap" >录取结果通知时间：{{ data.resultNoticeTime  }}</span>
            </div>

          </div>
          <div class="mt-6px w-40% align-right">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ getOfficer(data.trainingUserName) }}</span>
              </template>
              <div class="mt-40px ellipsis">培训官：{{ getOfficer(data.trainingUserName) }}</div>
            </a-tooltip>
            <a-tooltip placement="top">
              <template #title>
                <span>{{ getOfficer(data.trainingTeacherName) }}</span>
              </template>
              <div class="ellipsis mt-10px" >培训导师：{{ getOfficer(data.trainingTeacherName) }}</div>
            </a-tooltip>
          </div>
        </div>
      </div>
      <div class="block-div h-156px  flex items-center justify-between " style='flex:1'>
        <div class="flex">
          <div class="flex items-center mr-60px">
            <Pie width="100px" height="100px" :params="pringParams" />
            <div class="ml-20px">
              <div>到培：{{ data.arrivalCount }}</div>
              <div>约培：{{ data.interviewCount }}</div>
              <div>已约到培率=到培/约培</div>
            </div>
          </div>
          <div class="flex items-center" v-if="data.status">
            <Pie width="100px" height="100px" :params="retainParams" />
            <div class="ml-20px">
              <div>留存：{{ data.retainCount }}</div>
              <div>到培：{{ data.arrivalCount }}</div>
              <div>留存率=留存/到培</div>
            </div>
          </div>
        </div>
        <div class="flex person-div">
          <div v-for="item in peopleList" :key="item.name" class="flex">
            <template v-if="item.show">
              <div class="mr-15px">
                <img :src="item.url" class="w-56px h-56px">
              </div>
              <div class="mt-4px">
                <div>{{ item.name }}</div>
                <div class="font-bold font-size-20px" :style="{ color: item.color }">{{ item.number }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </span>
    <div class="block-div mb-16px relative">
      <div class="result-wrap">
        <div class="inner" v-show="resultList.length > 0">
          <span v-for="item in resultList" class="result-item">
            {{ item.value }}
            <CloseOutlined @click="remove(item)" />
          </span>
          <span @click="removeAll" class="result-clear">清空条件</span>
        </div>
        <span class="result-btn">
          <Button color="success" @click="exportTable">
            <template #icon><img class="search-i" src="@/assets/icon/export.svg"></template>
            导出本期表格
          </Button>
          <Button color="primary" @click="exportAssessTable">
            <template #icon><img class="search-i" src="@/assets/icon/assess.svg"></template>
            导出评价表</Button>
          <Button color="#FDB700" @click="batchChoose" class="flex items-center gap-1">
            <template #icon>
              <i class="iconfont icon-piliang"></i>
            </template>
            <span>批量选择</span>
          </Button>
        </span>

      </div>
      <div class="result-wrap">
        <div class="inner" v-show="transferList.length > 0">
          <span class="result-item ">
            <span class="" v-for="(item, idx) in transferList">
              {{ item.userName }}
              <span v-show="transferList.length - 1 != idx">、</span>
            </span>
          </span>
          <span @click="clearTransfer" class="result-clear">清空选择</span>
        </div>
      </div>
      <BasicTable :clickToRowSelect="false" :scroll="{ x: 2000, y: yDistance }" rowKey="resumesId"
        @register="registerTable" size="small">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'processStatus'">
            <div @click.stop>
              <template v-if="data.status == 0">
                <a-button @click="statusClick(record)" v-auth="'sendTrainingMailTrainingDetail'"
                  v-if="record.processStatus == 'TRAINING_EMAIL_SENT'" type="primary">
                  {{ operationObject[record.processStatus] || '--' }}
                </a-button>
                <a-button v-auth="'sendTrainingMailTrainingDetail'" v-else class="underline btn-hover" type="link"
                  @click="againSend(record)">重发邮件</a-button>
              </template>
              <a-button v-auth="'affirmTrainingDetail'" v-else-if="record.processStatus == 'TRAINING_ARRIVAL_SCHEDULED'"
                @click="statusClick(record)" type="primary">
                {{ operationObject[record.processStatus] || '--' }}
              </a-button>
              <a-button v-auth="'cancelAffirmTrainingDetail'" v-else-if="record.processStatus == 'TRAINING_IN_PROGRESS'"
                @click="statusClick(record)"
                :class="{ 'bg-#EC9903!important': ['TRAINING_IN_PROGRESS'].includes(record.processStatus) }"
                type="primary">
                {{ operationObject[record.processStatus] || '--' }}
              </a-button>
              <a-button v-else-if="record.processStatus == 'TRAINING_ARRIVAL_DECLINED'" :disabled="true" type="primary">
                {{ operationObject[record.processStatus] || '--' }}
              </a-button>
              <div v-else>--</div>
            </div>
          </template>
          <template v-else-if="column.key === 'userName'">
            <a-button type="link" class="btn-hover" @click="goApplicationDetail(record)">
              {{ record.userName }}
              <!-- <span class="status-name" v-if="record.isRecommends === '0'">内</span>
              <span class="status-name" v-if="record.sendCount">{{record.sendCount}}</span>
              <span class="status-name" v-if="record.isException > 1">异</span> -->
            </a-button>
          </template>
          <template v-else-if="column.key === 'sex'">
            {{ textFind(record.sex, 'sex') || '--' }}
          </template>
          <template v-else-if="column.key === 'graduateTime'">
            <!-- <a-tag :color="record.educationType == 0 ? '#2db7f5': '#87d068'" v-if="record.graduateTime">{{ record.graduateTime }}</a-tag> -->
            <a-button :class="record.educationType === 1 ? 'graduate-other' : 'graduate'" v-if="record.graduateTime">
              {{ record.graduateTime }}
            </a-button>
            <span v-else>--</span>
          </template>
          <template v-else-if="column.key === 'group'">
            <EditColumn :options="groupOptions" field="group" :record="record" :data="data" :column="column"
              placeholder="请选择小组" @success="reload" />
          </template>
          <template v-else-if="column.key === 'questions'">
            <EditColumn :options="questionOptions" field="questions" :record="record" :data="data" :column="column"
              placeholder="请选择选题" @success="reload" />
          </template>
          <template v-else-if="column.key === 'assessUserName'">
            <EditColumn :options="managementOptions" field="assessUserName" :record="record" :data="data"
              :column="column" mode="multiple" placeholder="请选择考核官" @success="reload" />
          </template>
        </template>
        <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, visible, clearFilters, column }">
          <Dropdown :column="column" :state="state" @handleReset="handleReset(column)"
            @handleSearch="setPagination({ current: 1 }); handleSearch(selectedKeys, confirm, column)"
            @handleInputChange="handleInputChange($event, column)" @onCheckAllChange="onCheckAllChange(column)"
            @onCheckChange="onCheckChange(column)" />
        </template>
      </BasicTable>
      <div class="left-45px bottom-20px" v-show='tableData.length > 0' :class="{ absolute: tableData.length > 0 }">
        <!-- <a-checkbox v-show="data.status == 0 || data.status == 1" v-model:checked="allchecked" class="mb-5px"
          @click="selectAllRows">全选</a-checkbox> -->
        <a-button class="btn ml--10px" size='default' @click="sendEmail(true, false)"
          v-if="data.status == 0">发送邮件</a-button>
        <template v-if="data.status == 1">
          <a-button v-auth="'setGroup'" class="btn ml-10px" type="primary" size='default'
            @click="setGroup">设置分组与选题</a-button>
          <a-button v-auth="'setAssessUser'" class="btn ml-10px" type="primary" size='default'
            @click="setOfficer">设置考核官</a-button>
        </template>
      </div>
    </div>
    <Model :trainingNumberId="trainingNumberId" @register="registerModal" @success="handleSuccess('time')"
      :minHeight="100" />
    <Email :data="data" @register="registerEmail" @success="handleSuccess('email')" :isAgain="isAgain" :minHeight="100"
      :selectList="selectList" />
    <Group :groupOptions="groupOptions" :questionOptions="questionOptions" @register="registerGroup"
      @success="handleSuccess('group')" :minHeight="100" :selectList="selectList" />
    <Officer :trainingNumberId="trainingNumberId" @register="registerOfficer" @success="handleSuccess('officer')"
      :minHeight="60" :options="managementOptions" :selectList="selectList" />

    <CommonTransfer ref="transfer" title="批量操作" @comfirm='transferComfirm'></CommonTransfer>
  </div>
</template>
<script lang="ts">//设置组件名称
import { defineComponent } from 'vue';
export default defineComponent({
  name: "trainDetailes"
});
</script>
<script lang="ts" setup>
import { ref, computed, onBeforeMount, onActivated } from 'vue'
import Pie from './components/Pie.vue'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import Dropdown from '@/views/DataCenter/HRData/components/Dropdown.vue'
import { useTableInit } from '@/views/DataCenter/HRData/components/useTableInit.js'
import { ifShowFun, columns, statusList, textFind, textShow, operationObject } from './components/data.ts'
import { message } from 'ant-design-vue'
import Model from '@/views/TrainList/components/Modal.vue'
import { useModal } from '@/components/Modal'
import successPng from '@/assets/images/trainDetail/success.png'
import errorPng from '@/assets/images/trainDetail/error.png'
import warnPng from '@/assets/images/trainDetail/warn.png'
import Email from './components/Email.vue'
import Group from './components/Group.vue'
import Officer from './components/Officer.vue'
import CommonTransfer from '@/views/applicationDetails/CommonTransfer.vue';
import { selectTrainingNumberDetailPage, statisticsTrainingNumber, getUserIDList } from '@/api/train/detail.ts'
import { selectUserByRole } from '@/api/applay/trainlist/self'
import {
  trainingArrive,
  progressRollback,
  selectStatusByTrainId,
  selectCommonConfigDetail,
  exportTrainingNumberDetail,
  exportTrainingUserDetail
} from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
import EditColumn from './components/EditColumn.vue';
import { Button } from "@/components/Button";
import { downloadByData } from '@/utils/file/download';
import { useRoute, useRouter } from "vue-router";

const route = useRoute()
const router = useRouter()
const [registerModal, { openModal }] = useModal()
const [registerEmail, { openModal: openEmailModal }] = useModal()
const [registerGroup, { openModal: openGroupModal }] = useModal()
const [registerOfficer, { openModal: openOfficerModal }] = useModal()

const yDistance = computed(() => { //y的滚动距离
  let num = 450;
  const scrollHeight = document.documentElement.scrollHeight;
  const ratio = (num) / 962
  return scrollHeight * ratio
})

onActivated(async () => {
  const { trainingNumberId: id } = route.query
  if (id) {
    trainingNumberId.value = id
    await getDeatil()
    await setOptions()
    initState(options)
    // 获取培训详情
    // 初始化state数据
  } else {
    message.error('缺少培训期数id')
  }
  reload()
})
// 状态切换 
const store = comStores()
const { userName } = store.userInFor;
async function statusClick(data) {
  switch (data.processStatus) {
    case 'TRAINING_EMAIL_SENT':
    case 'TRAINING_EMAIL_ACCEPTED':
      // transferList.value = [data]
      // setSelectedRowKeys([data.resumesId])
      // dataHave()
      sendEmail(true, data)
      break;
    case 'TRAINING_ARRIVAL_SCHEDULED':
      // 确认到培
      confirmArrive(data)
      break;
    // 取消到培
    case 'TRAINING_IN_PROGRESS':
      cancelArrive(data)
      break;
  }
}

const getIdList = async (item) => {
  const { current, pageSize } = getPaginationRef();
  const param = {
    pageNo: current,
    pageSize: pageSize,
    trainingNumberId: trainingNumberId.value
  }
  sessionStorage.setItem('cacheParam', JSON.stringify(param))
  const data = await getUserIDList(param);
  if (data && data.length > 0) {
    sessionStorage.setItem("cacheResumeList", JSON.stringify(data));
    const resume = data.find(el => el.value == item.resumesId);
    sessionStorage.setItem("cacheResume", JSON.stringify(resume))
  } else {
    sessionStorage.setItem("cacheResume", "{}")
    sessionStorage.setItem("cacheResumeList", '[]');
  }
}

// 名称跳转
async function goApplicationDetail(item: any) {
  await getIdList(item);
  const query = {
    // ...item,
    id: item.resumesId,
    withnext: "true",
    from: "trainDetail"
  }
  router.push({ path: '/applicationDetails/cvDetail', query })
}

// 重新发送
function againSend(data) {
  // setSelectedRowKeys([data.resumesId])
  // transferList.value = [data]
  // dataHave()
  sendEmail(false, data)
}

// 确认到培
async function confirmArrive(data) {
  const params = {
    resumeId: data.resumesId,
    processId: data.processId,
    result: "通过",
    operator: userName
  }
  const res = await trainingArrive(params)
  if (res?.code && res.code != '10000') {
    message.error(res.msg)
  } else {
    reload()
    getDeatil()
    await setOptions();
    initState(options)
    message.success('确认到培成功')
  }
}

// 取消到培
async function cancelArrive(data) {
  const { userName } = store.userInFor
  const params = {
    resumeId: data.resumesId,
    process: '到培',
    operator: userName
  }
  const res = await progressRollback(params)
  if (res?.code && res.code != '10000') {
    message.error(res.msg)
  } else {
    reload()
    getDeatil()
    message.success('取消到培成功')
  }
}

// 打开弹框
function handleOpenModal() {
  let time = data.value.trainingTime
  let trainingTime = [] as any
  if (time) {
    trainingTime = time.split('至')
  }
  openModal(true, {
    nums: 2,
    value: { trainingNumberId: trainingNumberId.value }
  })
}

// 成功后回调
async function handleSuccess(type) {
  // 回来后关闭弹框
  openModal(false)
  switch (type) {
    case 'time':
      message.success('修改成功')
      getDeatil()
      break;
    case 'email':
      reload()
      getDeatil();
      await setOptions()
      initState(options)
      break;
    case 'group':
      message.success('设置成功')
      reload()
      getDeatil()
      break;
    case 'officer':
      message.success('设置成功')
      getDeatil()
      reload()
      break;
    default:
      break;
  }
}

// 人数
const peopleList = computed(() => {
  return [
    {
      name: '通过人数',
      url: successPng,
      number: 0,
      color: '#16C716',
      show: [3].includes(data.value.status)
    },
    {
      name: [1, 2].includes(data.value.status) ? '中途劝退' : '淘汰人数',
      url: errorPng,
      number: 0,
      color: '#FF4242',
      show: ![0].includes(data.value.status),
    },
    {
      name: [1, 2].includes(data.value.status) ? '中途放弃' : '放弃人数',
      url: warnPng,
      number: 0,
      color: '#F0A03D',
      show: ![0].includes(data.value.status),
    },
  ]
})

// 数据
const data = ref({
  trainingNumberName: '', // 培训期数名称
  status: 0, // 状态  0未开始 1培训中 2考核中 3已结束
  trainingTime: "封装拼接 开始到结束时间",
  passedCount: "",// 通过数量,
  failedCount: "", // 淘汰数量,
  declinedCount: "", // 放弃数,
  arrivalCount: "", //  到培数,
  interviewCount: "", // 约培数,
  retainCount: '', // 留存
  interviewRate: "", // 约培率默认100%,
  passedRate: "", // 过培率过培率100%
  arrivalRate: '', // 到培率
  retainRate: '', // 留存率
  trainingUserName: [], // 培训官
  trainingTeacherName: [], // 导师
  resultNoticeTime:"", //录取结果通知时间
})

// 期数
const trainingNumberId = ref()

// 获取培训详情
async function getDeatil() {
  let params = {
    trainingNumberId: trainingNumberId.value
  }
  const res = await statisticsTrainingNumber(params);
  console.log(res,'===>res')
  if (res) {
    data.value = {
      ...res,
    }
    console.log(data.value,'===>data')
    ifShowFun({ status: data.value.status })
    peopleList.value[0].number = res.passedCount
    peopleList.value[1].number = res.failedCount
    peopleList.value[2].number = res.declinedCount
  }
}

// 状态
const statusObj = computed(() => {
  return statusList.find(item => item.value === data.value.status) as { name: string; status: string; value: number } || {}
})

// 培训人员
function getOfficer(data) {
  return data && data.length > 0 ? data.join('、') : "未设置"
}

// 已约到培率
const pringParams = computed(() => {
  return {
    color: '#209EE4',
    text: '已约到培率',
    correctRate: data.value.arrivalCount || 0,
    total: data.value.interviewCount || 0,
    graphicText: data.value.arrivalRate,
  }
})

// 留存率
const retainParams = computed(() => {
  return {
    color: '#209EE4',
    text: '留存率',
    correctRate: data.value.retainCount || 0,
    total: data.value.arrivalCount || 0,
    graphicText: data.value.retainRate,
  }
})

const state = ref<any>({}) // 状态
const resultList = ref<any>([]) // 表格操作
const tableData = <any>ref([]) // 表格数据
const transfer = ref<any>(null)
const total = ref<number>(100)
onBeforeMount(async () => {
  const { trainingNumberId: id } = route.query
  if (id) {
    trainingNumberId.value = id
    await getDeatil()
    await setOptions()
    initState(options)
    // 获取培训详情
    // 初始化state数据
  } else {
    message.error('缺少培训期数id')
  }
})

const {
  initState,
  handleSearch,
  onCheckAllChange,
  onCheckChange,
  handleInputChange,
  handleReset,
  removeAll,
  remove,
} = useTableInit({ state, tableData, columns, resultList, searchFun })

const getTableData = async (param) => {
  return await selectTrainingNumberDetailPage(param);
}

const [registerTable, { reload, setPagination, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys, getPaginationRef }] = useTable({
  title: '',
  api: getTableData,
  columns,
  formConfig: {
    labelWidth: 120,
    //schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    showAdvancedButton: true,
    autoAdvancedLine: 4,
    showSubmitButton: false,
  },
  // rowSelection: {
  //   type: 'checkbox'
  // },
  pagination: {
    pageSize: 50, // 设置每页显示 50 条数据
    // 可以添加更多 pagination 的配置
    defaultPageSize: 50,
    pageSizeOptions: ['10', '15', '20', '50'],
  },
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  beforeFetch(info) {
    resultList.value.forEach(v => {
      if (v.formType == 'time') {
        if (v.params?.length) {
          v.params.forEach((item, index) => {
            info[item] = v.inputValue[index]
          })
        } else {
          info[v.key] = v.inputValue
        }
      } else if (v.formType == 'input') {
        info[v.params || v.key] = v.inputValue
      } else {
        info[v.params || v.key] = v.checkedList
      }
    })
    info.trainingNumberId = trainingNumberId.value
    info.resumesIds = transferList.value.map(el => {
      return el.resumesId
    })
  },
  sortFn(sortInfo) {
    if (sortInfo.order) {
      return { sortingFields: [{ field: sortInfo.field, order: sortInfo.order === 'descend' ? 'desc' : 'asc' }] }
    } else {
      return {}
    }
  },
  afterFetch(list) {
    tableData.value = list
    let keys = ['group', 'questions', 'assessUserName']
    keys.forEach((el) => {
      tableData.value.forEach(v => {
        v[`${el}Show`] = true
      })
    })
  }
})

const allchecked = ref(false) // 全选
// 选中所有行
function selectAllRows() {
  if (!allchecked.value) {
    const allKeys = tableData.value.map(row => row.resumesId)
    setSelectedRowKeys(allKeys)
  } else {
    clearSelectedRowKeys()
  }
}

// 搜索
function searchFun() {
  reload()
}

// 发送邮件
const isAgain = ref<boolean>(false);
function sendEmail(is, data: any) {
  isAgain.value = !is
  if (data) {
    selectList.value = [data]
    openEmailModal(true, {})
    return
  }
  if (is) {
    if (dataHave().length > 0) {
      openEmailModal(true, {})
    }
  } else {
    openEmailModal(true, {})
  }
}

// 下载名单
function download() {
  if (dataHave().length > 0) {
    message.success('下载成功')
  }
}

// 数据前置处理
const selectList = ref<any>([])
function dataHave() {
  const selects = transferList.value
  if (selects.length == 0) {
    message.error('你还没选择数据')
    return []
  }
  selectList.value = selects
  return selects
}

// 设置分组与选题
function setGroup() {
  if (dataHave().length > 0) {
    openGroupModal(true, {})
  }
}

// 设置面试官
function setOfficer() {
  if (dataHave().length > 0) {
    openOfficerModal(true, {})
  }
}

const managementOptions = ref([]) // 考核官
const groupOptions = ref([])  // 小组
const questionOptions = ref([]) // 选题
// 获取远程下拉数据
const options = ref({
  processStatusName: [],
  qualificationType: [],
  region: [],
  preserveUserName: [],
  group: [],
  questions: [],
  assessUserName: [],
  entryLocation: [],
  entrySubject: [],
  entryGrade: [],
})
async function setOptions() {
  managementOptions.value = await selectUserByRole({ request: 'ASSESS', type: '0' }) // 考核官
  groupOptions.value = await getOptions("GROUP") // 小组
  questionOptions.value = await getOptions("QUESTIONS") // 选题
  options.value.entryGrade = await getOptions("ENTRY_GRADE") // 年级
  options.value.entrySubject = await getOptions("SUBJECT") // 科目
  options.value.entryLocation = await getOptions("BRANCH_SCHOOL") // 分校
  options.value.assessUserName = managementOptions.value // 考核官
  options.value.group = groupOptions.value // 小组
  options.value.questions = questionOptions.value // 选题
  options.value.preserveUserName = await selectUserByRole({ request: 'HR', type: '0' }) // HR
  options.value.qualificationType = await getOptions("EDUCATION") // 学历
  options.value.region = await getOptions("DEPT") // 所属大区
  const { data: statusList } = await selectStatusByTrainId({ trainingNumberId: trainingNumberId.value })
  options.value.processStatusName = statusList
}

// 获取options
async function getOptions(type) {
  const data = await selectCommonConfigDetail({ type })
  if (data && data.code === '10000') {
    return data.data.map((el) => {
      return {
        label: el.label,
        value: el.label,
      }
    })
  } else {
    message.error(data.msg)
    return []
  }
}
const exportTable = async () => {
  let param = {
    trainingNumberId: trainingNumberId.value,
  }
  const res = await exportTrainingNumberDetail(param);
  await downloadByData(res, data.value.trainingNumberName + ".xls");
  message.success("下载成功")
}

const exportAssessTable = async () => {
  let param = {
    trainingNumberId: +trainingNumberId.value,
  }
  const res = await exportTrainingUserDetail(param);
  await downloadByData(res, data.value.trainingNumberName + ".zip");
  message.success("下载成功")
}

const batchChoose = async () => {
  const data = await getTableData({
    pageNo: 1,
    pageSize: total.value,
    trainingNumberId: trainingNumberId.value
  })
  if (!data) {
    return message.error('获取列表失败')
  }
  data.data.forEach(el => {
    el.key = el.resumesId
  })
  transfer.value.open(data.data)
}
const transferList = ref<any>([])
const transferComfirm = (list) => {
  console.log(list, 'list')
  transferList.value = list;
  reload()
}

const clearTransfer = () => {
  transferList.value = [];
  transfer.value.clear();
  reload()
}
</script>

<style lang="less" scoped>
.train-details {

  color: #333;

  .status-name {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    margin-right: 5px;

    &:nth-of-type(1) {
      color: #FF4242;
      background: rgba(255, 66, 66, 0.1);
    }

    &:nth-of-type(2) {
      color: #209EE4;
      background: rgba(32, 158, 228, 0.1);
    }

    &:nth-of-type(3) {
      color: #F0A03D;
      background: rgba(240, 160, 61, 0.1);
    }
  }

  .text-span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    flex: 1;
  }

  .block-div {
    background-color: var(--component-background);
    border-radius: 10px;
    padding: 24px 30px;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .person-div>.flex:nth-child(2) {
    margin: 0 50px;
  }

  .result-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
    min-height: 30px;
    line-height: 30px;
    margin-top: 10px;
    border-radius: 4px;
    position: relative;

    .result-item {
      flex: 1;
      font-size: 12px;
      margin-right: 15px;
      border: 1px solid #ccc;
      padding: 3px 10px;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .result-clear {
      color: #209ee4;
      cursor: pointer;
      font-size: 14px;
      border: 1px solid;
      padding: 1px 5px;
    }

    .result-btn {
      position: absolute;
      right: 0px;
      display: flex;
      gap: 8px;
    }
  }

  .btn-hover,
  .btn-hover:hover {
    color: #209EE4;
  }

  :deep(.btn-hover>span:hover) {
    text-decoration: underline;
  }
}

.align-right {
  text-align: right;
}

.graduate-other {
  color: #F0A03D;
  border: none;
  background-color: rgba(240, 160, 61, 0.15);
}

.graduate {
  color: #209EE4;
  border: none;
  background-color: rgba(32, 158, 228, 0.15);
}
</style>